import G6 from '@antv/g6';
import insertCss from 'insert-css';

// 我们用 insert-css 演示引入自定义样式
// 推荐将样式添加到自己的样式文件中
// 若拷贝官方代码，别忘了 npm install insert-css
insertCss(`
  .g6-tooltip {
    border: 1px solid #e2e2e2;
    border-radius: 4px;
    font-size: 12px;
    color: #545454;
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px 8px;
    box-shadow: rgb(174, 174, 174) 0px 0px 10px;
  }
`);

G6.registerNode('rNode', {
  drawShape: (cfg, group) => {
    const rect = group.addShape('rect', {
      attrs: {
        x: -cfg.size[0] / 2,
        y: -cfg.size[1] / 2,
        width: cfg.size[0],
        height: cfg.size[1],
        ...cfg.style
      },
      name: 'rect-shape'
    });
    const responseRect = group.addShape('rect', {
      attrs: {
        width: 30,
        height: 15,
        x: -cfg.size[0] / 2 + 5,
        y: -cfg.size[1] / 2 + 5,
        fill: '#fff',
        stroke: cfg.style.stroke,
        lineWidth: 1
      },
      name: 'tooltip-response-shape'
    });
    const responseText = group.addShape('text', {
      attrs: {
        text: 'hover here!',
        fill: '#f00',
        x: -cfg.size[0] / 2 + 10,
        y: -cfg.size[1] / 2 + 10,
        textBaseline: 'top'
      },
      name: 'tooltip-response-text-shape'
    });
    const textBBox = responseText.getBBox();
    responseRect.attr({
      width: textBBox.width + 10,
      height: textBBox.height + 10
    })
    return rect;
  }
}, 'rect')
const data = {
  nodes: [
    {
      id: '0',
      label: 'A',
      x: 220,
      y: 100,
      description: 'This is node A.',
      subdescription: 'This is subdescription of node A.',
    },
    {
      id: '2',
      label: 'No Tooltip',
      x: 150,
      y: 310,
      description: 'This is node B.',
      subdescription: 'This is subdescription of node B.',
    },
    {
      id: '3',
      label: 'C',
      x: 320,
      y: 310,
      description: 'This is node C.',
      subdescription: 'This is subdescription of node C.',
    },
  ],
  edges: [
    {
      id: 'e1',
      source: '0',
      target: '2',
      description: 'This is edge from node 0 to node 2.',
    },
    {
      id: 'e2',
      source: '0',
      target: '3',
      description: 'This is edge from node 0 to node 3.',
    },
  ],
};
const descriptionDiv = document.createElement('div');
descriptionDiv.innerHTML =
  'Hover the sub rect with red border to show the tooltip.';
const container = document.getElementById('container');
container.appendChild(descriptionDiv);
const width = container.scrollWidth;
const height = container.scrollHeight - 30;
const graph = new G6.Graph({
  container: 'container',
  width,
  height,
  linkCenter: true,
  defaultNode: {
    size: [100, 100],
    type: 'rNode',
    style: {
      fill: '#DEE9FF',
      stroke: '#5B8FF9',
    },
  },
  defaultEdge: {
    style: {
      stroke: '#b5b5b5',
      lineAppendWidth: 3,
    },
  },
  modes: {
    default: [
      'drag-node',
      {
        type: 'tooltip',
        formatText: function formatText(model) {
          const text = 'description: ' + model.description;
          return text;
        },
        offset: 30,
        shouldBegin: (e) => {
          if (e.item.getModel().id === '2') return false;
          const div = document.getElementsByClassName('g6-tooltip')[0];
          if (div) div.style.display = 'none';
          return true;
        },
        shouldUpdate: (e) => {
          if (e.target.get('name') === 'tooltip-response-shape' ||
            e.target.get('name') === 'tooltip-response-text-shape') {
            const div = document.getElementsByClassName('g6-tooltip')[0];
            if (div) div.style.display = 'block';
            return true
          }
          return false;
        }
      },
    ],
  },
});
graph.data(data);
graph.render();
